<template>
    <div class="search-list-wrapper">
        
        <v-app-bar
            absolute
            color="white"
            shrink-on-scroll
            :src="imgCover + '?imageView&thumbnail=414y360&quality=75&tostatic=0' || ''"
            fade-img-on-scroll
            dense
            app
            scroll-target="#song-cell"
            height="80"
            extension-height="32"
        >
            <template v-slot:img="{ props }">
                <v-img
                v-bind="props"
                gradient="to top right, rgba(251,231,231,.5), rgba(253,241,242,.8)"
                ></v-img>
            </template>
            <v-icon
                @click="$router.go(-1)"
                large
                color="gruy  darken-2"
            >
            mdi-chevron-left
            </v-icon>
            <v-text-field
                v-model="keyword"
                single-line
                clearable
                @blur="searchSong"
                autofocus
                @keyup.enter="searchSong"
            ></v-text-field>

            <template v-slot:extension>
                <v-tabs align-with-title>
                    <v-tab>模糊搜</v-tab>
                    <v-tab>歌名搜</v-tab>
                    <v-tab>歌词搜</v-tab>
                    <v-tab>MV搜</v-tab>
                </v-tabs>
            </template> 
        </v-app-bar>
        
        <v-main>

        <v-sheet id="song-cell" class="cell-warpper overflow-y-auto" max-height="1000" >
            <v-container style="height: auto;">
                <song-cell :data="songs"  >


                </song-cell>
            </v-container>
        </v-sheet>
        </v-main>
        <Control />
    </div>
</template>

<script>
import api from '@/api/index.js'
import songCell from '@/components/songCell/songCell.vue'
import {musicMixin} from '@/utils/mixin'
import Control from '@/components/control/control'


export default {
    mixins: [musicMixin],
    data(){
        return {
            keyword: '',
            songs: []
        }
    },
    watch: {
        $route() {
            this.keyword = this.$route.query.keyword || '';
            this.searchSong();
        }
    },
    components: {
        songCell,
        Control
    },
    methods: {
        searchSong() {
            if(!this.keyword) return;

            api.search(this.keyword).then((res)=>{
                console.log(res.data.result.songs);
                this.songs = res.data.result.songs;

            })
        }
    },
    created(){
        this.keyword = this.$route.query.keyword || '';
        this.searchSong();
    }
}
</script>

<style lang="scss" scoped>
    @import '@/assets/styles/global';
    .search-list-wrapper {
     
        .cell-warpper {
            height: calc(100vh - 48px);
        }
    }
</style>